<template>
    <div class="setting-content categorySetting-container">
        <h2 class="setting-header">
            <strong>{{route.meta.title}}</strong>
        </h2>
        <RuifoxTable v-loading="tableLoading" v-model:tableData="menuList" :field-list="fieldList" :default-checkbox="true" :default-index="true">
            <template #isShow="{ element }">
                <el-switch
                    v-model="element.isShow"
                    :before-change="handleChangeShow.bind(this, element)"
                    :loading="switchLoading && activeId === data.id"
                    :active-value="true"
                    :inactive-value="false"
                />
            </template>
            <!-- 操作 -->
            <template #options="{ element }">
                <div class="table-td-option">
                  <el-button link type="primary" @click="handlePreview(element)">预览</el-button>
                </div>
            </template>
        </RuifoxTable>
    </div>
</template>
<script setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
const menuList = ref([
    {id:1,path:"/recruitment/user/home",title:"首页", name:"RecruitmentUserHome",isShow:true},
    {id:2,path:"/recruitment/user/notice",title:"招聘公告", name:"RecruitmentUserNotice",isShow:true},
    {id:3,path:"/recruitment/user/jobs",title:"职位搜索", name:"RecruitmentUserJobs", child:"RecruitmentUserApply",isShow:true},
    {id:4,path:"",title:"联系我们", name:"RecruitmentUserContact",isShow:false}
])
const fieldList = ref([
  { title: '栏目名称', name: 'title' },
  { title: '栏目路径', name: 'path' },
  { title: '是否显示', name: 'isShow' },
  { title: '操作', name: 'options' }
])

// 修改 handleChangeShow 方法
const switchLoading = ref(false)
const activeId = ref(null)
const handleChangeShow = data => {
  switchLoading.value = true
  activeId.value = data.id

//   let _data = {
//     id: data.id,
//     isShow: !data.isShow
//   }
//   return new Promise((resolve, reject) => {
//     updateCategory(_data)
//       .then(res => {
//         if (res.code === 20000) {
//           ElMessage({
//             showClose: true,
//             message: '修改成功',
//             type: 'success'
//           })
//           return resolve(true)
//         }
//       })
//       .catch(() => {
//         return reject(new Error('Error'))
//       })
//       .finally(() => {
//         switchLoading.value = false
//         activeId.value = null
//       })
//   })
}

// 预览栏目
const handlePreview = data => {
    const newPath = data.path.startsWith('/') ? data.path.slice(1) : data.path;
    const url = `${location.origin}${process.env.BASE_URL}${newPath}`
    window.open(url, '_blank')
}
</script>
<style lang="scss" scoped>
    
</style>